<template>
	<view class="container">
		<!-- 图片轮播 -->
		<view class="swiper-box">
			<u-swiper height="404rpx" :list="imgList"></u-swiper>
		</view>
		<!-- 医院名称 -->
		<view class="name">{{ hospitalStore.name ?? '综合门诊医院' }}</view>
		<!-- 电话地址 -->
        <view class="concat-box">
            <view class="item" style="margin-bottom: 30rpx;">
                <view class="left">
                    <u-image width="34rpx" height="34rpx" :src="getServerStatic('/static/images/a17.png')" ></u-image>
                    <view class="msg">咨询电话：{{ hospitalStore.hotline }}</view>
                </view>
            </view>
            <view class="item" style="margin-bottom: 30rpx;">
                <view class="left">
                    <u-image width="34rpx" height="34rpx" :src="getServerStatic('/static/images/a18.png')" ></u-image>
                    <view class="msg">地址：{{ hospitalStore.address }}</view>
                </view>
            </view>
            <view class="item">
                <view class="left" @tap="showHospitalMap">
                    <u-image width="34rpx" height="34rpx" :src="getServerStatic('/static/images/a19.png')" ></u-image>
                    <view class="msg">导航</view>
                </view>
            </view>
        </view>
		<!-- 简介 -->
		<view class="hos-content">
			<view class="title">
				<u-image width="32rpx" height="32rpx" :src="getServerStatic('/static/images/a20.png')" ></u-image>
				<view>医院简介</view>
			</view>
			<view class="content">
                {{ hospitalStore.desc }}
			</view>
		</view>
	</view>

	<TabBar :current-page="1"></TabBar>
</template>

<script setup>
    import {onLoad, onShow} from '@dcloudio/uni-app'
    import { useHospitalStore } from '@/store';
    const hospitalStore = useHospitalStore()
    import TabBar from "@/components/Tabbar"
    import {checkAndFixUrl, getServerStatic} from "@/utils/tool";
	const imgList = ref([
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	])

    onLoad(() => {
        imgList.value = [hospitalStore.photo].map(item => {
            return checkAndFixUrl(item)
        })
        console.log(imgList.value)
    })

    // 地图跳转.
    const showHospitalMap = () => {
        console.log("纬度范围为-90~90", hospitalStore.latitude_val)
        console.log("经度范围为-180~180", hospitalStore.longitude_val)
        uni.openLocation({
            latitude: Number(hospitalStore.latitude_val),
            longitude: Number(hospitalStore.longitude_val),
            //longitude: Number(123.536525),
            //latitude: Number(41.74164),
            name: hospitalStore.name,
            address: hospitalStore.address,
            scale: 18,
            success: function () {
                console.log('success');
            },
            fail: function (err) {
                console.log(err);
            }
        });
    }
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 30rpx 200rpx;
	}
	.name {
		margin: 30rpx 0 ;
	}
	.concat-box {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 34rpx;
		.item {
			@include between();
			color: #606672;
			.left {
				@include between();
			}
			.msg {
				margin-left: 8rpx;
			}
			.right {
				@include center();
				font-size: 24rpx;
				color: #516DDB;
				padding-right: 20rpx;

				&>view {
					margin-left: 12rpx;
				}
			}
		}
	}
	.hos-content {
		margin-top: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 34rpx;
		.title {
			@include start();
			color: #222222;
			font-size: 30rpx;
			& > view {
				margin-left: 16rpx;
				font-weight: 500;
			}
		}
		.content {
			margin-top: 32rpx;
			color: #606672;
			line-height: 56rpx;
		}
	}


</style>
